<template>
  <NuxtLayout name="content">
    <div class="work">
      <template v-for="(item, index) in workList" :key="index">
        <BlockWork :imgUrl="item.imgUrl" :desc="item.desc" :name="item.name" :linkUrl="item.linkUrl"
          :sourceUrl="item.sourceUrl" />
      </template>
    </div>
  </NuxtLayout>
</template>

<script setup lang="ts">
import { type work, findAll as apiFindAllWork } from "~/api/work";
useHead({
  title: '作品展示',//网站标题
})
const workList = ref<work[]>([]);
const findWork = async () => {
  const res = await apiFindAllWork();
  if (res?.data) {
    workList.value = res.data;
  }
};
findWork();
</script>
<style lang="scss" scoped>
.work {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}
</style>
